<template>
    <div>
        
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

            <!--卡片视图区域-->
        <el-card class="box-card">   
          <!--表格头-->
            <el-row :gutter="30">
            <el-col :span="8">
                 <el-button type="primary" @click="addDataDialog">添加商品【三级】</el-button>
            </el-col>
            </el-row>

            <!--用户列表区域-->
            <!-- 树形表格组件 -->
            <tree-table class="treeTable"
            :data="pageList"
            :columns="columns"
            :selection-type="false"
            :expand-type="false"
            show-index
            index-text="#"
            border
            >
            <!-- 是否有效模板 -->
            <template slot="isok" slot-scope="scope">
               <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false"></i>
               <i class="el-icon-error" style="color: red" v-else></i>
             </template>
            <!-- 排序模板 -->
            <template slot="myOrder" slot-scope="scope">
                 <el-tag type="success" size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
                 <el-tag type="warning" size="mini"  v-else-if="scope.row.cat_level==1">二级</el-tag>
                  <el-tag type="danger" size="mini"  v-else-if="scope.row.cat_level==2">三级</el-tag>
             </template> 
             <!-- 操作模板 -->
             <template slot="myOpt" slot-scope="scope">
                 <!--修改按钮-->
                  <el-button type="primary" icon="el-icon-edit" size="mini"   @click="editDataDialog(scope.row)">编辑</el-button>
                  <!--删除按钮-->
                  <el-button type="danger" icon="el-icon-delete" size="mini"   @click="removeDataById(scope.row.cat_id)">删除</el-button>
             </template> 
            </tree-table>

           <!--分页区域-->
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page='queryInfo.pagenum'
            :page-sizes="[5,10, 20]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination> 

        </el-card>   

         <!--添加编辑商品对话框-->   
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dataDiglogVisble"
            width="50%"
            @close="closeDialogForm" >
            <!--内容主体区域-->
            <el-form :model="DataFrom" :rules="DataFromRules" ref="DataFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="cat_name">
                <el-input v-model="DataFrom.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类" >
                <!-- 级联选择 -->
                <el-cascader
                      ref="cascaderRef"
                    v-model="cascaderKeys"   
                    :options="parentCateList"
                     expand-trigger="hover"
                    :props="cascaderProps"
                    @change="cascaderChange"
                    clearable change-on-select>
                </el-cascader>

            </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dataDiglogVisble = false">取 消</el-button>
                <el-button type="primary" @click="submissionData">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
export default {
   data() {
       return {
           //数据列表
           dataList:[],
           //父级分类列表
           parentCateList:[],
           //级联选择器属性
           cascaderProps:{
                value: 'cat_id',   //选中的值
                label: 'cat_name', //看到的值
                children: 'children'//父子嵌套
           },
           //级联选择绑定的值[是一个数组] cat_id
           cascaderKeys:[],
           //------分页查询条件-------
          queryInfo:{
            //查询条件
            type:3,  //查询三级
            //当前页
            pagenum:1,
            //当前页每页数据
            pagesize:5
            },
            //总数
            total:0,
            //分页数据
            pageList:[],
         //---------树形表格---------------  
         //表格列
         columns: [
                {
                label: '分类名称',
                prop: 'cat_name'
                },
                {
                label: '是否有效',
                // 表示将当前列定义为模板列
                type: 'template',
                // 表示当前这一列的模板名称
                template: 'isok'
                },
                {
                label: '排序',
                // 表示将当前列定义为模板列
                type: 'template',
                // 表示当前这一列的模板名称
                template: 'myOrder'
                },
                {
                label: '操作',
                // 表示将当前列定义为模板列
                type: 'template',
                // 表示当前这一列的模板名称
                template: 'myOpt'
                },
            ], 
        //---------------------------------
          //控制添加对话框是否显示
             dataDiglogVisble:false,
             DataFrom:{
                 cat_id:'',
                 cat_pid:0,//默认顶级
                 cat_level:0,
                 cat_name:''
             },
             dialogTitle:'提示',
             //数据表单规则验证
           DataFromRules:{
                cat_name:[
                   { required: true, message: '请输入商品名称', trigger: 'blur' },
                   { min: 1, max: 8, message: '长度在 1 到8 个字符', trigger: 'blur' }
                ],
                
            },           
       }
   }, 
   created() {
       this.getDataPageList();
   },
   methods: {
       //添加数据对话框
       addDataDialog(){
           this.getCatPIdList();
           this.dialogTitle="新增商品"
           this.dataDiglogVisble=true 
       },
        //编辑数据对话框
       editDataDialog(cateData){
         this.getCatPIdList();
           this.dialogTitle="编辑商品";
           //赋值
           this.DataFrom.cat_id=cateData.cat_id;
           this.DataFrom.cat_name=cateData.cat_name
           this.DataFrom.cat_level=cateData.cat_level;
           this.DataFrom.cat_pid=cateData.cat_pid;
           //不是顶级
           if(cateData.cat_level==1){//1 或  2
              this.cascaderKeys[cateData.cat_pid]//二级
                                
           } if(cateData.cat_level==2){
                 this.getCascaderKeysByid(cateData.cat_pid)//三级
            } 
         console.log("====222===="+this.cascaderKeys)  
            this.dataDiglogVisble=true;   

       },
          //监听添加编辑对话框关闭事件
       closeDialogForm(){
       this.$refs.DataFormRef.resetFields();//重置表单 
          //清空数据 
            this.DataFrom={
                 cat_id:'',
                 cat_pid:0,//默认顶级
                 cat_level:0,
                 cat_name:''
            };  
            //清空父级id
            this.cascaderKeys=[];
           
       },
       //点击确定提交数据
       submissionData(){
        
        if(!this.DataFrom.cat_id){
            //添加
          this.$refs.DataFormRef.validate(valid=>{           
             if(!valid)  return;

              this.$my_http({
                  method:"post",
                  url:"categories",
                  data:this.DataFrom 
                }).then(res => {
                    this.dataDiglogVisble=false;//关闭
                    if(res.data.meta.status != 201){
                      this.$message.error(res.data.meta.msg);
                    }else{  
                     this.$message({ type: 'success', message: '创建成功!'});
                    this.getDataPageList();        
                 }
                }) 

            });

        }else{
         //编辑
          this.$refs.DataFormRef.validate( valid=>{
                    if(!valid) return
                    //发起数据请求
                    this.$my_http({
                    method:"put",
                    url:`categories/${this.DataFrom.cat_id}`,//无法修改分类；只能改名字
                    data:this.DataFrom
                    }).then(res => {
                         this.dataDiglogVisble=false

                        if(res.data.meta.status != 200){
                        this.$message.error(res.data.meta.msg);
                       
                        }else{                         
                            this.$message({ type: 'success', message: '修改商品成功!'});
                            this.getDataPageList();                                    
                        }
                 }) 
             });  

        }

       },


       //根据 id 查询分类信息
       getCascaderKeysByid(cat_pid){  
            this.$my_http({
                    method:"get",
                    url:`categories/${cat_pid}`,          
                    }).then( res => {
                        if(res.data.meta.status != 200){
                          this.$message.error(res.data.meta.msg);                      
                        }else{    
                            //push()方法有Bug;通常数据可以回显，但是视图没有回显出来
                            this.cascaderKeys=[res.data.data.cat_pid,cat_pid]                                                                    
                        }
                 }) ;
            
       },
       //获取父级id列表
       getCatPIdList(){
              this.$my_http({
                  method:"get",
                  url:"categories",
                  //GET传递参数要加上params
                  params:{"type":2}   //数字1 表示仅仅展示一级。2表示展示二级。3表示展示三级
                }).then(res => {
                    if(res.data.meta.status != 200){
                      this.$message.error("获取数据失败");
                    }else{  
                    this.parentCateList=res.data.data
                //    console.log(res.data.data)
          
                 }
                }) 

       },
      //级联选择框发生改变(赋值)
       cascaderChange(){
        //如果选了则取出父级id 
        if(this.cascaderKeys.length>0){
            //父级分类id
        this.DataFrom.cat_pid  =  this.cascaderKeys[this.cascaderKeys.length-1];
            //商品等级
        this.DataFrom.cat_level =this.cascaderKeys.length;
      
        }else{
        //否则清空数据（默认一级）
        this.DataFrom.cat_pid  = 0; 
        this.DataFrom.cat_level =0;
        }
       },
    
       //分页获取数据列表
       getDataPageList(){

             this.$my_http({
                  method:"get",
                  url:"categories",
                  //GET传递参数要加上params
                  params:this.queryInfo  
                }).then(res => {
                    if(res.data.meta.status != 200){
                      this.$message.error("获取数据失败");
                    }else{  
                   this.pageList=res.data.data.result;
                   this.total=res.data.data.total;
                  // console.log(res.data.data.result)
          
                 }
                }) 

       },
        //监听最新的pagesize
        handleSizeChange(newSize){
            console.log(newSize)
             this.queryInfo.pagesize=newSize;
             this.getDataPageList();   
        },
        //监听当前页码pagenum
        handleCurrentChange(newPage){
            console.log(newPage)
            this.queryInfo.pagenum=newPage;
            this.getDataPageList();
        },
      
       //删除
       removeDataById(id){

            this.$my_http({
              method:"delete",
              url:`categories/${id}`,
               //  data:this.DataFrom
                 }).then(res => {
                   if(res.data.meta.status != 200){
                        this.$message.error(res.data.meta.msg);
                      
                    }else{                         
                        this.$message({ type: 'success', message: '删除商品成功!'});
                         this.getDataPageList();                                    
                       }
                 }) 

       }

   },
}
</script>
<style lang="less" scope>
.treeTable{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>